<template>
  <div style="width: 100%">
    <h2 style="margin-bottom: 20px">我关注的专业</h2>
    <el-divider />
    <div>
      <el-empty v-if="yxkTableList.length == 0" description="暂无数据" />
      <div v-for="(item, index) in yxkTableList" :key="index">
        <div
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <div>
            <div class="middleName" @click="academicDetails(item)">
              {{ item.name }}
            </div>
            <div style="font-size: 14px; color: #909399">
              <span style="margin-right: 50px">学历层次：</span>
              <span>专业类别：{{ item.bigName }}</span>
              <span style="margin: 0 3px" v-if="item.middleName">></span>
              <span v-if="item.middleName">{{ item.middleName }}</span>
              <span style="margin: 0 3px" v-if="item.name">></span>
              <span v-if="item.name">{{ item.name }}</span>
            </div>
          </div>
          <el-button @click="LikeSave(item)">已关注</el-button>
        </div>
        <el-divider border-style="dashed" />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="提醒！" width="500">
      <span>确定取消关注{{ changeItem.middleName }}吗？</span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitBtn"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getLikeSave } from '@/api/searchColleges/searchCollege';
import { likeList } from '@/api/user';
import { ElMessage } from 'element-plus';
const yxkTableList = ref([]);
const dialogVisible = ref(false);
const changeItem = ref({});
const like = ref({
  type: '',
  detail: '1',
});
const liskeSaveData = ref({
  type: 'major',
  targetid: '',
  operate: 'del',
});
onMounted(() => {
  getLikeList();
});
const getLikeList = () => {
  likeList(like.value).then((res) => {
    if (res.data.code == 20000) {
      yxkTableList.value = res.data.data.majorDetail;
    }
  });
};
const LikeSave = (item) => {
  changeItem.value = item;
  dialogVisible.value = true;
};

const submitBtn = async () => {
  liskeSaveData.value.targetid = changeItem.value.code;
  try {
    const res = await getLikeSave(liskeSaveData.value);
    if (res.data.code == 20000) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      window.location.reload();
      dialogVisible.value = false;
    } else {
      ElMessage({
        message: res.data.msg,
        type: 'error',
      });
      dialogVisible.value = false;
    }
  } catch (error) {
    console.error(error);
  }
};

const academicDetails = (item) => {
  let level = localStorage.getItem('level');
  const url =
    '/majorLibrary/majorLibraryDetMidd' +
    '?code=' +
    item.code +
    '&name=' +
    item.name +
    '&level=' +
    level;
  window.open(url, '_blank');
};
</script>

<style scoped>
#YxkuTable {
  padding-bottom: 30px;
  .item-img {
    width: 72px;
    margin: 15px 15px;
  }
  .chil-item {
    margin-right: 5px;
    padding: 2px 5px;
    border: 1px solid #d3d4d6;
    border-radius: 4px;
    color: #909399;
  }
  .cnName-box:hover {
    color: var(--color-text);
  }
  .my-btn {
    width: 80px;
    border-radius: 4px;
    justify-content: center;
    color: var(--color-text);
    border: 1px solid var(--color-text);

    &:hover {
      background: var(--color-text);
      color: #fff;
    }
  }
}
.isActive {
  background: var(--color-text);
  color: #fff;
}
.middleName {
  font-size: 15px;
  color: black;
  margin-bottom: 10px;
  cursor: pointer;
}
.middleName:hover {
  color: #165dff;
}
</style>
